<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8">
		<title>博客详情页面</title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
		<script type="text/javascript" src=../static/js/jquery-3.1.1.min.js th:src="@{/js/jquery-3.1.1.min.js}"></script>
		<link rel="stylesheet" href="../static/css/typo.css" th:href="@{/css/typo.css}"/>
		<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
		<link rel="stylesheet"href="../static/lib/toc/tocbot.css"th:href="@{/lib/toc/tocbot.css}" />
		<link rel="stylesheet" href="../static/css/menu.css"th:href="@{/css/menu.css}">
		<script src="../static/lib/toc/tocbot.min.js"th:src="@{/lib/toc/tocbot.min.js}"></script>
		<script src="../static/lib/qrcode/qrcode.min.js"th:src="@{/lib/qrcode/qrcode.min.js}" ></script>
	</head>
	<body>
		<!-- 导航 -->
		<nav class="ui inverted attached segment m-padded-tb-mini" >
			<div class="ui container">
				<div class="ui inverted secondary stackable menu">
					<h2 class="ui teal header item">Blog</h2>
					<a href="#"th:href="@{/}"class="m-item item m-mobile-hide"><i class=" home icon"></i>首页</a>
					<a href="#"th:href="@{/types/-1}"class="m-item item m-mobile-hide"><i class=" idea icon"></i>分类</a>
					<a href="#"th:href="@{/tags/-1}"class="m-item item m-mobile-hide"> <i class=" tags icon"></i>标签</a>
					<a href="#"th:href="@{/archives}"class="m-item item m-mobile-hide"><i class=" clone icon"></i>归档</a>
					<a href="#"th:href="@{/about}"class="m-item item m-mobile-hide"><i class=" info icon"></i>关于我</a>
					<div class="right m-item item m-mobile-hide">
						<form  name="search" action="#" method="post" th:action="@{/search}" target="_blank">
							<div class="ui icon  input">

								<input type="text" name="query"  placeholder="Search..." th:value="${query}">
								<i onclick="document.forms['search'].submit()" class="search link icon"></i>
							</div>
						</form>


					</div>
				</div>
			</div>
			<a href="#" class="ui menu toggle black icon button m-top-right m-mobile-show ">
				<i class="sidebar icon"></i>
			</a>
		</nav>
		<!-- 大中间内容 -->
		<div class="m-padded-tb-large m-container">
			<!-- 头部 -->
			<div class="ui container">
				<div class="ui top attached segment">
					<div class="ui horizontal link list">
						<div class="item">
							<img src="../static/img/2.png"th:src="@{${blog.user.avatar}}" style="width: 30px; height: 30px;"class="ui avatar image"/>
							<div class="content"><a href="#"th:text="${blog.user.nickname}"class="header">看看哈</a></div>
						</div>
						<div class="item">
							<i class="calendar icon"></i><span  th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2017-10-01</span>
						</div>
						<div class="item">
							<i class="eye icon"></i><span th:text="${blog.views}">2342</span>
						</div>
					</div>
				</div>
				<!-- 图片区域 -->
				<div class="ui attached segment">
					<img src="../static/img/4.jpg" th:src="@{${blog.firstPicture}}"style="width: 1000px;height: 500px;"class="ui fluid rounded image" />
				</div>
				<!-- 内容 -->
				<div class="ui  attached padded segment">
					<div class="ui right aligned basic segment ">
					<div class="ui orange basic label" th:text="${blog.flag}">原创</div>
					</div>
					<h2 class="ui center aligned header"th:text="${blog.title}">关于你的一生</h2>
					<div id="content"  class= " typo typo-selection  m-padded-lr-reponsive" th:utext="${blog.content}">
						<h1 id="selection3">
							1. 不畏将来，不念过往，就是对时光最美的回应，愿这悠长岁月温柔安好。
							</h1>
							<h2 id="select2">2. 愿你，春赏繁樱，夏观夜星，秋见霜菊，冬遇初雪。人间的扬尘里，只看得见美事。
</h2>
							<h3 id="selection1">3. 爱你所爱的人，温柔地对待一切，不要因不幸而怨恨和悲戚，无论前途怎样凶险，都要微笑着站定，一颗平常心，不恐惧，不逃避。
</h3>
							<p>4. 谁能把时光挽留，在夕阳西下散满金辉的暮年，恬静淡然的回眸。岁月如歌，往事如烟——时光藏在每个人的心间。
</p>
						<p>	5. 我在路上，亲吻我的梦想，追逐我最爱的阳光。
</p>
						<p>	6. 我们都是世界里的一颗尘埃女子，看似一直都是被疼爱的那个。可是，内心深处，只是自己的温暖。
</p>
						<p>	7. 盈一份懂得，学会浅淡而行，随遇而安，便会花开四季，明媚嫣然。
</p>
						<p>	8. 丢失的日子如融化在人群里的好姑娘，我看着她沿途美丽下去，嫁给别人。
</p>
						<p>	9. 我等的车总是很久才来，我爱上的人全是意外。
</p>
						<p>	10. 轻拾月光，听风声缱绻，时光里的暖香化作笔尖的诗行，如刹时花开。</p>
					
					</div>
					<!-- 标签 -->
					<div class="m-padded-lr-reponsive">
						<div class="ui basic teal left pointing label"th:each=" tag: ${blog.tags}" th:text="${tag.name}">方法论</div>
					</div>
					<!-- 赞赏 -->
					<div class="ui center aligned basic segment">
					<button id="payButton" class="ui orange basic circular  button ">赞赏</button>
					</div>
					<div class="ui payQR flowing popup  transition hidden">
						<div class="ui orange basic label">
								<div class="ui images"style="font-size: inherit!important;">
									<div class="image">
										<img src="../static/img/6.png" th:src="@{/img/6.png}" class="ui rounded bordered image" style="width: 120px;"/>
										<div>支付宝</div>
										<div class="image">
										<img src="../static/img/5.png" th:src="@{/img/5.png}" class="ui rounded bordered image" style="width: 120px;"/>
										<div>微信</div>
									</div>
									
								</div>
							</div>
						</div>
					</div>
					<!-- 博客信息 -->
				<div class="ui attached positive message">
					<div class="ui middle aligned grid">
						<div class="eleven wide column">
							<ui class="list">
								<li>作者：<span th:text="${blog.user.nickname}">李人米</span><a th:href="@{/about}"target="_blank">（联系作者）</a></li>
								<li>发表时间:  <span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd HH:mm')}">2017-10-02</span></li>
								<li>版权声明</li>
								<li>公众号转载</li>
							</ui>
						</div>
						<div class="five wide column">
							<img src="../static/img/1.png"th:src="@{/img/1.png}"class="ui right floated rounded bordered image"style="width: 110px;" />
						</div>
					</div>
				</div>
				<!-- 留言内容 -->
				<div  class="ui bottom attached segment">
					<div id="comment-container" class="ui teal segment">
						<div th:fragment="commentList">
						<div class="ui comments" style="max-width: 100%">
						  <h3 class="ui dividing header">评论</h3>
						  <div class="comment" th:each="comment : ${comments}">
						    <a class="avatar">
						      <img src="../static/img/2.png"th:src="@{${comment.avatar}}">
						    </a>
						    <div class="content">
						      <a class="author">
								 <span th:text="${comment.nickname}" >Matt</span>
								  <div class="ui mini basic teal left pointing label "th:if="${comment.adminComment}">博主

								  </div>
							  </a>
						      <div class="metadata">
						        <span class="date"th:text="${#dates.format(comment.createTime,'yyyy-MM-dd hh:mm')}" >Today at 5:42PM</span>
						      </div>
						      <div class="text"th:text="${comment.content}" >
						        How artistic!
						      </div>
						      <div class="actions">
						        <a class="reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${comment.id},data-commentnickname=${comment.nickname}" onclick="reply(this)">回复</a>
						      </div>
						    </div>
                              <div class="comments" th:if="${#arrays.length(comment.replyComments)}>0">
                                  <div class="comment" th:each="reply : ${comment.replyComments}">
                                      <a class="avatar">
                                          <img src="../static/img/2.png"th:src="@{${reply.avatar}}">
                                      </a>
                                      <div class="content">
                                          <a class="author" >
											<span th:text="${reply.nickname}">Matt</span>
											  <div class="ui mini basic teal left pointing label "th:if="${reply.adminComment}" >博主

											  </div>&nbsp;
											  <span th:text="|@${reply.parentComment.nickname}"| class="m-blue">@小白</span>
										  </a>
                                          <div class="metadata">
                                              <span class="date"th:text="${#dates.format(comment.createTime,'yyyy-MM-dd hh:mm')}" >Today at 5:42PM</span>
                                          </div>
                                          <div class="text"th:text="${reply.content}" >
                                              How artistic!
                                          </div>
                                          <div class="actions">
                                              <a class="reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${reply.id},data-commentnickname=${reply.nickname}" onclick="reply(this)">回复</a>
                                          </div>
                                      </div>
                                  </div>
                              </div>
						  </div>

						  
						</div>

						</div>
					</div>

					<div id="comment-form" class="ui form">
						<input type="hidden"name="blog.id"th:value="${blog.id}">
						<input type="hidden"name="parentComment.id" value="-1" >
						<div class="field">
							<textarea name="content"placeholder="请输入评论信息..."></textarea>
						</div>
						<div class="fields">
							<div class="field m-mobile-wide m-margin-bottom-small">
								<div class="ui left icon input">
									<i class="user icon"></i>
									<input type="text" name="nickname" placeholder="姓名" th:value="${session.user}!=null? ${session.user.nickname}"/>
								</div>
							
						</div>
						<div class=" field m-mobile-wide m-margin-bottom-small">
							<div class="ui left icon input">
								<i class="mail icon"></i>
								<input type="text" name="email" placeholder="邮箱"  th:value="${session.user}!=null? ${session.user.email}"/>
							</div>
							
						</div>
						<div class="field m-mobile-wide m-margin-bottom-small">
							<button id="commentpost-btn" type="button" class="ui teal button m-mobile-wide"><i class="edit icon"></i>发布</button>
						</div>
						</div>
						
					</div>
					
				</div>
			</div>
			
				
		</div>
			
			
		</div>
		<div class="m-fixed m-right-bottom ">
		<div class="ui vertical icon buttons ">
			
			<a href="#comment-container" class="ui teal button">留言</a>
			<button class="ui weichat teal button"><i class="weixin icon"></i></button>
				<a href="#" class="ui teal button"><i class="chevron up icon"></i></a>
		</div>
		</div>
		<div id="qrcode" class="ui weichatQR flowing popup  transition hidden">
		<!-- 	<img src="img/1.png"class="rounded"style="width: 150px;" /> -->
			</div>

		
		<!-- 底部footer -->
		<footer class="ui inverted vertical segment m-padded-tb-massive">
			<div class="ui center aligned container">
				<div class="ui stackable inverted divided grid">
					<div class="three wide column">
						<div class="ui inverted link list">
							<div class="item">
						<img src="../static/img/1.png"th:src="@{/img/1.png}" class="ui rounded image" alt=""style="width: 100px;"/>
					         </div>
						</div>
					</div>
					<div class="three wide column">
						<h4 class="ui inverted header">最新博客</h4>

						<div class="ui inverted link list"th:each="blog : ${recommendBlogs}">
							<a href="#" target="_blank"th:href="@{/blog/{id}(id=${blog.id})}" class="item" th:text="${blog.title}">用户故事</a>
						</div>


					</div>
					<div class="three wide column">
						<h4 class="ui inverted header">最新博客</h4>
						<div class="ui inverted link list">
							<a href="#" class="item">用户故事</a>
							<a href="#" class="item">用户故事</a>
							<a href="#" class="item">用户故事</a>
						</div>
					</div>
					<div class="seven wide column">
						<h4 class="ui inverted header">最新博客</h4>
						<p class="m-text-thin m-text-space m-opacity-mini">这是一个傻逼的博客，看了会很丑陋</p>
					</div>
				</div>
				<div class="ui inverted section divider"></div>
				<p class="m-text-thin m-text-space m-opacity-mini">请联系我</p>
			</div>
			
		</footer>
		<script th:inline="javascript">
		$('.menu.toggle').click(function(){
			$('.m-item').toggleClass('m-mobile-hide');
			
		});
		
		$('#payButton').popup({
			popup:$('.payQR.popup'),
			on:'click',
			position:'bottom center'
		});
		
	$('.weichat.button').popup({
		popup:$('.weichatQR'),
		on:'click',
		position:'bottom center'
	});
	    var serUrl="http://localhost:8090";
	    var url=/*[[@{/blog/{id}(id=${blog.id})}]]*/"";
		var qrcode = new QRCode("qrcode", {
		    text: serUrl+url,
		    width: 120,
		    height: 120,
		    colorDark : "#000000",
		    colorLight : "#ffffff",
		    correctLevel : QRCode.CorrectLevel.H
		});
		$('.ui.form').form({
			fields:{
				title:{
					identifier:'content',
					rules:[{
						type:'empty',
						prompt:'标题，请输入评论内容'
					}]

				},
				nickname:{
					identifier:'nickname',
					rules:[{
						type:'empty',
						prompt:'标题，请输入您的大名'
					}]

				},
				email:{
					identifier:'email',
					rules:[{
						type:'email',
						prompt:'标题，请填写正确的邮箱地址'
					}]

				},
			}
		});

		$(function () {
            $("#comment-container").load(/*[[@{/comments/{id}(id=${blog.id})}]]*/"/comments/6");
        });



		$('#commentpost-btn').click(function () {
			var boo= $('.ui.form').form('validate.form');
			if (boo){
				console.log('校验成功');
				postData();
			}else {
				console.log('校验失败');
			}
		});
		function postData() {
			$("#comment-container").load(/*[[@{/comments}]]*/"/comments", {
				"parentComment.id": $("[name='parentComment.id']").val(),
				"blog.id": $("[name='blog.id']").val(),
				"nickname": $("[name='nickname']").val(),
				"email": $("[name='email']").val(),
				"content": $("[name='content']").val()
			},function (responseTxt,statusTxt,xhr) {

				clearContent();
			});
		}
		function clearContent() {
			$("[name='content']").val('');
			 $("[name='parentComment.id']").val(-1);
			$("[name='content']").attr("placeholder","请输入评论信息....");
		}

		function reply(obj) {
			var commentId=$(obj).data('commentid');
			var commentNickname=$(obj).data('commentnickname');
			$("[name='content']").attr("placeholder","@"+commentNickname).focus();
			$("[name='parentComment.id']").val(commentId);


		}
		</script>
	</body>
</html>
